<template>
  <div>
      <slot name="formtitle"></slot>
       <el-form inline v-bind="attr">
          <el-form-item v-for="item in formData" :label="item.label">
            <!-- 输入框 -->
              <el-input v-if="item.type==='input'" :placeholder="item.placeholder" v-model="queryForm[item.field]"></el-input>
            <!-- 下拉框 -->
             <el-select style="width: 200px;" v-if="item.type=='select'" :placeholder="item.placeholder" v-model="queryForm[item.field]">
               <el-option v-for="pitem in item.options" :label="pitem.label" :value="pitem.value"></el-option>
             </el-select>
             <!-- 日期  -->
              <el-date-picker v-if="item.type=='date'" :placeholder="item.placeholder" type="daterange" value-format="YYYY-MM-DD" v-model="queryForm[item.field]">

              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="toSearch" :icon="Search" type="primary">搜索</el-button>
            <el-button :icon="Refresh" >重置</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>
<script setup>
import {Search,Refresh} from '@element-plus/icons-vue'
// 组件封装整体思路
  // 封装组件 的样式 ，保持样式复用
  //   设计哪些父传子props
  //   设计哪些子传父emits
  //   设计哪些插槽slot
  //   暴露了哪些方法 给父组件使用
  //  二次封装 使用v-bind="attr" 将父组件传来的属性 继承
  
  // 设计个formdata属性 是生成表单控件的数组
  // 根据 formdata 中的type的不同 生成不同的表单
  //根据label属性加载标题 
 import {reactive,defineEmits,defineProps,useAttrs} from 'vue'
 let attr=useAttrs();
 let queryForm=reactive({ //整个表单收集的数据 一会要返回给 使用者
    params:{
      beginTime:"",
      endTime:""
    }
 })
 let emit=defineEmits(["sendForm"])
let toSearch=()=>{ //点击搜索 将 整个收集的数据传给父组件
  if(queryForm.createTime){ //处理好时间搜索
      queryForm.params["beginTime"]=queryForm.createTime[0]
      queryForm.params["endTime"]=queryForm.createTime[1]
      delete queryForm.createTime //删除多的createTime
  }

  emit("sendForm",queryForm)
}

let props=defineProps({
  formData:{ //表单数据  用来生成表单控件
    type:Array,
    default:()=>[]
  },
  formConfig:{
    type:Object,
    default:()=>({})
  } //表单的样式配置
})

</script>